<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mobiscroll_002.css" >
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>

    <script src="../script/mobiscroll_002.js" type="text/javascript"></script>
    <script src="../script/mobiscroll_004.js" type="text/javascript"></script>
    <script src="../script/mobiscroll.js" type="text/javascript"></script>
    <script src="../script/mobiscroll_003.js" type="text/javascript"></script>
    <script src="../script/mobiscroll_005.js" type="text/javascript"></script>

</head>
<body class="bg-eee">
    <header class="header">
        <div class="backPrevPage" onclick="historyBack()"></div>
        <div class="pageTitle">个人资料</div>
    </header>
    <section class="memberInfoPage HTML_BOX">
        <div class="bg-eee" style="border-bottom:.2rem solid #EEE ; "></div>
        <ul class="settings plr bg-fff">
            <li class="displayFlex">
                <span>头像</span>
                <div class="tx"><img class="userTx" src="../image/tx.png" /></div>
            </li>
            <li class="displayFlex">
                <span>用户名</span>
                <div class="inputInfo"><input placeholder="请输入昵称" tyoe="text" /></div>
            </li>
            <li class="displayFlex">
                <span>生日</span>
                <div class="inputInfo">
                    <input placeholder="请选择出生日期" readonly="readonly" name="appDateTime" id="appDateTime"/>
                </div>
            </li>
            <li class="displayFlex">
                <span>性别</span>
                <select class="sex"><option selected="selected">男</option><option>女</option></select>
            </li>
            <li class="displayFlex">
                <span>个性签名</span>
                <div class="inputInfo"><input placeholder="请输入个性签名" tyoe="text" /></div>
            </li>
            <li class="displayFlex">
                <span>手机号</span>
                <div class="inputInfo"><input placeholder="请输入电话号码" readonly="" value="13637992261" tyoe="text" /></div>
            </li>
            <li class="displayFlex">
                <span>邮箱</span>
                <div class="inputInfo"><input placeholder="邮箱地址" readonly="" tyoe="text" /></div>
            </li>
            <li class="displayFlex">
                <span>快速登录</span>
                <div class="loginIcon"><i></i><i></i></div>
            </li>
        </ul>
        <div class="loginBtn f_c">保存</div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var icon_id =0;
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        $(".userTx").hide();
        ifCnAndEn();
        ready();
    };
	$(".loginBtn").click(function(){
        var layers = "";
        var isnull = false;
        $(".settings input").each(function(i,item){
            var val = $(item).val();
            if(val == "" && !isnull){
                switch(i){
                    case 0:
                    layers = "请输入昵称";
                    if(cnen==2){
                        layers='Please enter a nickname';
                    }
                    isnull = true;
                    break;            
                }
            }
        });
        if(isnull){
            console.log(layers);
            pop.notice(layers);
            return;
        }
        var p = {
            token:token,
            username:$(".settings input").eq(0).val(),
            birthday:$(".settings input").eq(1).val(),
            sex:$(".sex").val(),
            sign:$(".settings input").eq(2).val(),
        }
        if(icon_id!=0){
            p.icon = icon_id;
        }
        console.log(JSON.stringify(p));
        pop.loading();
        getAjax(Interface.info_change,p,function(res){
            pop.close();
            api.sendEvent({
                name: 'duihuanyhq',
                extra: {}
            });
            pop.notice(res.msg,1,function(){
                historyBack();
            })
        },function(res,err){})
    });
    $(".selctSex").click(function(){
        $(".sex").click();
    })

    //点击上传
    $(".tx").click(function(){
        var buttons = ['拍照', '从手机相册选择'];
        var cancel='取消';
        var title = '上传图片';
        if(cnen==2){
            buttons = ['Photograph', 'Selection from Mobile Phone Album'];
            title = 'Upload pictures';
            cancel = 'Cancel';
        }
        api.actionSheet({
             title:title,
             cancelTitle: cancel,
             buttons: buttons,
        }, function(ret, err) {
             if (ret) {
                 getPicture(ret.buttonIndex);
             }
        });
    })
    function getPicture(sourceType) {
        if (sourceType == 1) { // 拍照
            if(hasPermissions_camas()){
                getXiangji();
            }else{
                if(hasPermissions_camas()){
                    getXiangji();
                }
            }
        } else if (sourceType == 2) { // 从相机中选择
            var has = hasPermissions('storage');
            if(has == false){
                api.requestPermission({
                    list: ['storage'],
                    code: 100001
                }, function(ret, err){
                    console.log(JSON.stringify(ret));
                    var result = ret.list[0].granted;
                    var never = ret.never;
                    if (never == true && result == false){
                        api.toast({
                                msg:'请在设置中打开读取存储空间的权限',
                            });
                        return;
                    }
                    if(result == false){
                         return;
                    }
                    getDuqu();
                });
            }else{
                getDuqu();
            }
            //UIMediaScanner 是一个多媒体扫描器，可扫描系统的图片、视频等多媒体资源
        }
    }
    function getDuqu(){
        var texts =  {
                    stateText: '已选择*项',
                    cancelText: '取消',
                    finishText: '完成'
                };
        if(cnen==2){
            texts = {//（可选项）模块各部分的文字内容
                    stateText: '* items have been selected',
                    cancelText: 'Cancel',
                    finishText: 'Confirm'
                }
        }
        var obj = api.require('UIMediaScanner');
        obj.open({
            type: 'all',//返回的资源种类,picture（图片）,video（视频）,all（图片和视频）
            column: 4,//（可选项）图片显示的列数，须大于1
            max: 1,
            sort: { //（可选项）图片排序方式,asc（旧->新）,desc（新->旧）
                key: 'time',
                order: 'desc'
            },
            texts: texts,
            styles: {
                bg: '#fff',
                mark: {
                    icon: '',
                    position: 'bottom_right',
                    size: 20
                },
                nav: {
                    bg: '#eee',
                    stateColor: '#000',
                    stateSize: 18,
                    cancleBg: 'rgba(0,0,0,0)',
                    cancelColor: '#000',
                    cancelSize: 18,
                    finishBg: 'rgba(0,0,0,0)',
                    finishColor: '#000',
                    finishSize: 18
                }
            }
        }, function(ret) {
            console.log(JSON.stringify(ret));
            if(ret.eventType=='cancel'){return;}
            if (ret) {
                if (ret.hasOwnProperty("list")) {
                    api.showProgress({
                        title: '正在上传...',
                        modal: true
                    });
                }
                console.log(ret);
                upload(ret.list[0].path,function(res){
                    icon_id =res.id;
                    $(".userTx").attr("src",getImg(res.pic)).load(function(){
                     pop.close();
                    });
                });
            }
        });
    }
    function getXiangji(){
        //获取一张图片
        api.getPicture({
            sourceType: 'camera',
            encodingType: 'png',
            mediaValue: 'pic',
            allowEdit: false,
            quality: 90,
            saveToPhotoAlbum: true
        }, function(ret, err) {
            if(ret.data==''){return;}
            if (ret) {
                var imgSrc = ret.data;
                if (imgSrc != "") {
                    //$api.attr(ele, 'src', imgSrc);
                }
                console.log(ret.data);
                upload(ret.data,function(res){
                    icon_id =res.id;
                    $(".userTx").attr("src",getImg(res.pic)).load(function(){
                     pop.close();
                    });
                });
            }
        });
    }


    function ready(){
        pop.loading();
        getAjax(Interface.member_info,{token:token},function(res){
            pop.close();
            console.log(JSON.stringify(res));
            var data = res.data.info;
            $(".userTx").attr("src",getImg(data.icon)).show();
            $(".settings input").eq(0).val(data.username);
            $(".settings input").eq(2).val(data.sign||"");
            $(".settings input").eq(3).val(data.mobile||"");
            $(".settings input").eq(4).val(data.email||"");
            $(".settings input").eq(4).val(data.email||"");
            if(data.sex==1){
                $(".sex").html('<option value="1" selected="selected">男</option><option value="2">女</option>');
            }else{
                $(".sex").html('<option value="1">男</option><option value="2" selected="selected">女</option>');
            }
            if(cnen==2){
                if(data.sex==1){
                    $(".sex").html('<option selected="selected">Male</option><option>Female</option>');
                }else{
                    $(".sex").html('<option>Male</option><option selected="selected">Female</option>');
                }
            }
            if(data.birthday !=0){
                $(".settings input").eq(1).val(timestampToTime(data.birthday));
            }
            if(data.facebook_id){

            }
        },function(err){
            alert(JSON.stringify(err));
        })
    }
    //时间选择
    var currYear = '1800';
    var opt={};
    var l='zh';
    if(cnen ==2){
        l='en';
    }
    var today = "重置";
    if(cnen ==2){
        today='Today';
    }
    opt.date = {preset : 'date'};
    opt.datetime = {preset : 'datetime'};
    opt.time = {preset : 'time'};
    opt.default = {
        theme: 'android-ics light', //皮肤样式
        display: 'modal', //显示方式
        mode: 'scroller', //日期选择模式
        dateFormat: 'yyyy-mm-dd',
        lang: l,
        showNow: true,
        nowText: today,
        //minDate: new Date(),  //无法选择以前的时间
        startYear: currYear , //开始年份
    };
    var optDateTime = $.extend(opt['date'], opt['default']);
    $("#appDateTime").mobiscroll(optDateTime);
    function timestampToTime(timestamp) {
        //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var date = new Date(timestamp * 1000);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' '
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D;
    }
</script>
<script type="text/javascript">
    function ifCnAndEn(){
        if(cnen==2){
           $(".pageTitle").html('My Account');
           $(".settings li").eq(0).find("span").html('Head portrait');
           $(".settings li").eq(1).find("span").html('Nickname');
           $(".settings li").eq(2).find("span").html('Birthday');
           $(".settings li").eq(3).find("span").html('Sex');
           $(".settings li").eq(4).find("span").html('Signature');
           $(".settings li").eq(5).find("span").html('Phone number');
           $(".settings li").eq(6).find("span").html('Eamil address');
           $(".settings li").eq(7).find("span").html('Quick login');

           $(".settings li").eq(1).find("input").attr("placeholder","Please enter a nickname");
           $(".settings li").eq(2).find("input").attr("placeholder","Please choose your birthday");
           $(".settings li").eq(4).find("input").attr("placeholder","Please enter your signature");
           $(".settings li").eq(5).find("input").attr("placeholder","");
           $(".settings li").eq(6).find("input").attr("placeholder","");
           $(".loginBtn").html('Save');
        }
    }
</script>

</html>